<!--
 * @Author: 陈心怡
 * @Date: 2024-09-22 21:11:10
 * @LastEditors: 陈心怡
 * @LastEditTime: 2024-09-23 13:04:19
 * @FilePath: \web-vue2\src\components\cq-footer.vue
 * @Description:
-->
<template>
    <div class="cq-footer color-white text-center">
        <div class="w1160 cq-content flex">
            <div class="cq-contact flex fd_c">
                <div class="cq-contact-tel flex">
                    <img src="@/assets/img/service.png" alt="service">
                    <div class="tel flex fd_c">
                        <p class="fz22">400-096-0828</p>
                        <span class="fz14">7*24小时为您服务</span>
                    </div>
                </div>
                    <img class="qr-code" src="@/assets/img/QR-code.png" width="159px" height="159px">
                <p class="qr-code-text">微信扫描二维码，关注【橙券】</p>
            </div>
            <div class="cq-connect flex">
                <dl>
                    <dt><a href="#">橙品牌</a></dt>
                    <dd><a href="#">橙积分</a></dd>
                    <dd><a href="#">橙金融</a></dd>
                    <dd><a href="#">橙福利</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">快速入口</a></dt>
                    <dd><a href="#">权益平台</a></dd>
                    <dd><a href="#">开放平台</a></dd>
                    <dd><a href="#">供应商入驻</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">网站链接</a></dt>
                    <dd><a href="#">首页</a></dd>
                    <dd><a href="#">橙积橙权益</a></dd>
                    <dd><a href="#">行业案例</a></dd>
                    <dd><a href="#">新闻动态</a></dd>
                    <dd><a href="#">关于我们</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">友情链接</a></dt>
                    <dd><a href="#">Decent鼎信</a></dd>
                    <dd><a href="#">中国银联</a></dd>
                    <dd><a href="#">中国农业银行</a></dd>
                    <dd><a href="#">中国移动</a></dd>
                    <dd><a href="#">中国联通</a></dd>
                </dl>
            </div>
        </div>
        <p class="bottom-text fz14 text-center">©20xx xxxxxx有限公司 鲁ICP备130xxxx号-2xx</p>
    </div>
</template>

<script>
export default {
  name: 'CqFooter'
}
</script>

<style lang="scss" scoped>

.cq-footer {
    position: relative;
    padding-top: 50px;
    background-color: #22212f;
    .bottom-text {
        margin-top: 20px;
        line-height: 60px;
        color: #7e8088;
    }
}

.cq-content::after {
    content: '';
    position: absolute;
    width: 1400px;
    height: 1px;
    left: 50px;
    bottom: 60px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #4c4f5f, rgba(0, 0, 0, 0.1));
}

.cq-contact-tel {
    padding-left: 20px;
    img {
        margin-top: 6px;
        width: 50px;
        height: 50px;
    }
    .tel {
        margin-left: 5px;
    }
}

.cq-contact {
    padding-right: 80px;
    border-right: 1px solid #4c4f5f;
    .qr-code {
        padding: 16px 40px;
    }
    .qr-code-text {
        padding: 0px 22px;
    }
}

.cq-connect {
    padding-left: 90px;
    dl {
        width: 188px;
        padding-top: 20px;
        a:hover {
            color: #1971b3;
        }
    }
    dt {
        a {
            font-size: 16px;
            color: #fff;
        }
    }
    dd {
        padding-top: 25px;
        a {
            color: #cecece;
            font-size: 14px;
        }
    }
}

</style>
